<template>
<div class="goodsOrderInfo step" v-if="isInit">
  <div class="step-header">
    <el-steps :active="active" align-center finish-status="success">
      <el-step
        v-for="(item, index) in stepArray"
        :key="index"
        :title="item.label"
        :description="item.time"></el-step>
    </el-steps>
  </div>
  <div class="step-content">
    <div class="info-block">
      <div class="info-header">
        <div class="info-status">{{'当前订单状态：' + $$getCommonArrayName(models.mallOrderInfo.orderStatus, getEnum('mallOrderStatus'))}}</div>
        <div class="info-button" v-if="orderStatus >= 0">
          <el-popconfirm
            v-if="orderStatus === 25"
            title="是否确认通过退款申请？"
            @confirm="refund">
            <el-button slot="reference" type="primary" size="mini">通过退款申请</el-button>
          </el-popconfirm>
          <el-button v-if="isReply" type="primary" size="mini" @click="$emit('evaluate')">回复评价</el-button>
        </div>
      </div>
      <div class="info-content">
        <div
          v-for="(item, index) in contentArray"
          class="info-item"
          :key="index">
          <div class="info-item-header el-icon-medal">
            {{item.label}}
          </div>
          <template
            v-if="item.type === 'description'">
            <el-descriptions :column="item.column" direction="vertical" border>
              <el-descriptions-item
                v-for="(item2, index2) in item.data"
                :key="index + '_' + index2"
                :span="item2.span || 1">
                <template slot="label">
                  {{item2.label}}
                </template>
                {{item2.value || (item2.value === 0 ? 0 : '暂无')}}
              </el-descriptions-item>
            </el-descriptions>
          </template>
          <template v-if="item.type === 'table'">
            <y-table
              border
              :getDataWay="{ data: item.data }"
              :columns="item.columns">
              <template v-if="item.ref === 'goods'">
                <el-table-column slot="productPic" label="图标" align="center" header-align="center" width="130">
                  <template v-slot="{row}">
                    <img v-if="row.productPic" style="height: 80px" :src="generateMediaUrl({fileOpenUrl: row.productPic})"/>
                  </template>
                </el-table-column>
                <el-table-column slot="productPerPrice" label="价格/货号" align="center" header-align="center" min-width="200">
                  <template v-slot="{row}">
                    <div>价格：￥{{row.productPerPrice}}</div>
                    <div>货号：{{row.productSn}}</div>
                  </template>
                </el-table-column>
              </template>
            </y-table>
            <template v-if="item.ref === 'goods'">
<!--              <div class="info-total">合计：<span>{{'￥' + models.itemList.reduce((a,b) => a + b.productPerPrice * b.productQuantity, 0)}}</span></div>-->
              <div class="info-total">合计：<span>{{'￥' + models.mallOrderInfo.totalAmount}}</span></div>
            </template>
          </template>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "goodsOrderInfo",
  inject: ['getEnum', 'generateMediaUrl'],
  props:{
    orderId: String,
    isReply:{
      type: Boolean,
      default: false
    }
  },
  data(){
    return{
      isInit: true,
      stepArray: [
        {
          label: '提交订单',
          time: ''
        },
        {
          label: '支付订单',
          time: ''
        },
        {
          label: '平台发货',
          time: ''
        },
        {
          label: '确认收货',
          time: ''
        },
        {
          label: '完成评价',
          time: ''
        }
      ],
      contentArray: [],
      orderStatus: -1,
      active: -1,
      models:{
        itemList: [],
        mallOrderInfo: {},
        mallCancelPayHistory: {},
        operateHistoryList: [],
        orderDeliveryInfo: {},
        orderList: []
      }
    }
  },
  created(){
    this.$yAxios({
      url: this.$api.goods.goodsOrderDetails,
      data:{
        orderId: this.orderId
      },
      loading: true
    }, info => {
      Object.keys(this.models).map(key => {
        (info[key] !== undefined || info[key] !== null) && this.$set(this.models, key, info[key]);
      })
      this.initAll();
      this.isInit = true;
    })
  },
  methods:{
    initStep(){
      let keyArray = ['commitTime', 'payTime', 'deliveryTime', 'receiveTime', 'commentTime'];
      for(let i=0;i<keyArray.length;i++){
        let key = keyArray[i];
        if(this.models.mallOrderInfo[key]){
          this.stepArray[i].time = this.models.mallOrderInfo[key];
        }else{
          this.active = i;
          break;
        }
      }
    },
    initAll(){
      this.initStatus();
      this.initStep();
      this.initRefund();
      this.initBasic();
      this.initDelivery();
      this.initGoods();
      this.initCost();
      this.initLog();
    },
    initStatus(){
      let model = this.models.mallOrderInfo;
      if(model.orderStatus >= 0){
        this.orderStatus = model.orderStatus;
      }
    },
    initRefund(){
      if(this.orderStatus === 25){//退款审核
        let model = this.models.mallCancelPayHistory;
        let obj = {
          label: '退款信息',
          type: 'description',
          column: 3,
          data: [
            {
              label: '订单编号',
              value: model.orderSn
            },
            {
              label: '退款原因',
              value: model.reasonType + "：" + model.reason
            },
            {
              label: '申请时间',
              value: model.applyTime
            }
          ]
        };
        this.contentArray.push(obj);
      }
    },
    initBasic(){
      let model = Object.assign({}, this.models.orderDeliveryInfo || {}, this.models.mallOrderInfo);
      let ziti = !!this.models.mallOrderInfo.deliveryMode;
      let obj = {
        label: '基本信息',
        type: 'description',
        column: ziti ? 4 : 3,
        data: [
          {
            label: '订单编号',
            value: model.orderSn,
            span: ziti ? 2 : 1,
          },
          {
            label: '快递单号',
            value: model.deliverySn ? model.deliveryCompany + '：' + model.deliverySn : ''
          },
          {
            label: '用户账号',
            value: model.memberName
          },
          {
            label: '支付方式',
            value: this.$$getCommonArrayName(model.payType, Object.values(this.getEnum('commonPayType'))) || '未支付'
          },
          {
            label: '订单来源',
            value: this.$$getCommonArrayName(model.sourceType, this.getEnum('orderSource'))
          },
          {
            label: '配送模式',
            value: this.$$getCommonArrayName(model.deliveryMode || 0, this.getEnum('deliveryMode'))
          }
        ]
      };
      if(ziti){
        obj.data.push({
          label: '预计自提时间',
          value: model.appointmentTime
        })
      }
      this.contentArray.push(obj);
    },
    initCost(){
      let model = this.models.mallOrderInfo;
      let obj = {
        label: '费用信息',
        type: 'description',
        column: 5,
        data: [
          {
            label: '订单金额(元)',
            value: model.totalAmount
          },
          {
            label: '物流金额(元)',
            value: '+' + (model.freightAmount || 0)
          },
          {
            label: '优惠券金额(元)',
            value: '-' + (model.discountAmount || 0)
          },
          {
            label: '礼金卡金额(元)',
            value: '-' + (model.giftCardAmount || 0)
          },
          {
            label: '支付金额(元)',
            value: model.payAmount || 0
          }
        ]
      };
      this.contentArray.push(obj);
    },
    initDelivery(){
      let model = Object.assign({}, this.models.orderDeliveryInfo || {}, this.models.mallOrderInfo);
      let obj = !this.models.mallOrderInfo.deliveryMode ? ({
        label: '收货人信息',
        type: 'description',
        column: 3,
        data: [
          {
            label: '收货人',
            value: model.receiverName
          },
          {
            label: '手机号码',
            value: model.receiverPhone
          },
          {
            label: '收货地址',
            value: (function(){
              if(!model.receiverProvince) return '';
              return [model.receiverProvince, model.receiverCity, model.receiverRegion].toString() + ' ' + model.receiverDetailAddress
            }).call(this)
          }
        ]
      }) : ({
        label: '自提点信息',
        type: 'description',
        column: 2,
        data: [{
          label: '取货码',
          value: model.goodsCode
        },
        {
          label: '自提地址',
          value: (function(){
            if(!model.receiverProvince) return '';
            return [model.receiverProvince, model.receiverCity, model.receiverRegion].toString() + ' ' + model.receiverDetailAddress
          }).call(this)
        }]
      });
      this.contentArray.push(obj);
    },
    initGoods(){
      let model = this.models.itemList;
      let obj = {
        label: '商品信息',
        ref: 'goods',
        type: 'table',
        data: model,
        columns: [
          {
            label: '商品图片',
            prop: 'productPic',
            template: true
          },
          {
            label: '商品名称',
            prop: 'productName',
            minWidth: 200
          },
          {
            label: '价格/货号',
            prop: 'productPerPrice',
            template: true
          },
          {
            label: '规格',
            prop: 'productSpec',
            minWidth: 100
          },
          {
            label: '数量',
            prop: 'productQuantity',
            width: 60
          },
          {
            label: '小计',
            prop: 'total',
            width: 80,
            formatter(row){
              return `￥${row.productPerPrice * row.productQuantity}`
            }
          }
        ]
      }
      this.contentArray.push(obj);
    },
    initLog(){
      let model = this.models.operateHistoryList;
      let obj = {
        label: '操作信息',
        type: 'table',
        data: model,
        columns: [
          {
            label: '操作者',
            prop: 'updateUserName',
            width: '100'
          },
          {
            label: '操作时间',
            prop: 'updateTime',
            width: '180',
            formatter(row){
              return (row.updateTime || '').replace('T', ' ');
            }
          },
          {
            label: '订单状态',
            prop: 'orderStatus',
            width: '80',
            formatter: (function(row){
              return this.$$getCommonArrayName(row.orderStatus, this.getEnum('mallOrderStatus'))
            }).bind(this)
          },
          /*{
            label: '付款状态',
            prop: 'updateUserName'
          },
          {
            label: '发货状态',
            prop: 'updateUserName'
          },*/
          {
            label: '操作详情',
            prop: 'note'
          }
        ]
      }
      this.contentArray.push(obj);
    },
    refund(){
      let data = {
        refundOrderId: this.orderId,
        extend: this.getEnum('refundType').REFUND_MONEY.value //仅退款
      }
      if(this.models.mallOrderInfo.sourceType === 0){
        //商城订单
        data.orderType = this.getEnum('commonOrderType').MALL.value;
      }else{
        //物品订单
        data.orderType = this.getEnum('commonOrderType').ADOPT.value;
      }
      this.$yAxios({
        /*url: this.$api.goods.goodsOrderRefund,
        data: Object.gain(this.models.mallCancelPayHistory, ['id', 'orderId']),*/
        url: this.$api.common.refund,
        data,
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '通过退款审核'
        });
        this.$emit('close-drawer');
        this.$emit('refresh');
      })
    }
  },
}
</script>

<style scoped lang="less">
.goodsOrderInfo{
  .step-header{
    height: 100px;
  }
  .step-content{
    height: calc(100% - 100px);
    overflow-y: auto;
    padding: 0 40px;
  }
}
</style>
